<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<center>
    <form id="form" action="http://localhost:8080/onlineSystem/reg" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username" id="username"/></td>
                <td width="162"><span style="font-size: 12px" id="nametip">用户名为6~12位英文字符</span></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="userpwd" id="userpwd"/></td>
                <td><span style="font-size: 12px" id="pwdtip">密码为6~12位英文数字下划线</span></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input type="password" id="conpwd"/></td>
                <td><span style="font-size: 12px;color: red" id="contip"></span></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <select name="sex">
                        <option value="0">保密</option>
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                    <span style="font-size: 12px">非必填</span>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" value="提交" id="btn"/>
                    <input type="reset"/>
                </td>
            </tr>
        </table>
    </form>
</center>
<script type="text/javascript">
    window.onload = function () {
        var form = document.getElementById("form");
        var username = document.getElementById("username");
        var nametip = document.getElementById("nametip");
        var userpwd = document.getElementById("userpwd");
        var pwdtip = document.getElementById("pwdtip");
        var conpwd = document.getElementById("conpwd");
        var contip = document.getElementById("contip");
        var btn = document.getElementById("btn");

        var nameReg = /^[A-Za-z]{6,12}$/;
        var pwdReg = /^[A-Za-z0-9_]{6,12}$/;

        /******用户名栏失去焦点检测用户名是否合格******/
        username.onblur = function () {
            var len = username.value.length;
            nametip.style.color = "red";
            if(len < 6){
                nametip.innerText = "用户名过短";
            }else if(len > 12){
                nametip.innerText = "用户名过长";
            }else if(nameReg.test(username.value)){
                nametip.style.color = "black";
                nametip.innerText = "用户名通过验证";
            }else{
                nametip.innerText = "用户名为6~12位英文字符";
            }
        }

        /******用户名栏获得焦点显示用户名提示信息******/
        username.onfocus = function () {
            nametip.style.color = "black";
            nametip.innerText = "用户名为6~12位英文字符";
        }
        /******密码栏失去焦点,验证密码******/
        userpwd.onblur = function () {
            pwdtip.style.color = "red";
            var len = userpwd.value.length;
            if(len < 6){
                pwdtip.innerText = "密码太短";
            }else if(len > 12){
                pwdtip.innerText = "密码太长";
            }else if(pwdReg.test(userpwd.value)){
                pwdtip.style.color = "black";
                pwdtip.innerText = "密码检验通过";
            }else{
                pwdtip.innerText = "密码为6~12位英文数字下划线";
            }
            if(conpwd.value != userpwd.value){
                contip.style.color = "red";
                contip.innerText = "两次密码不同";
            }
        }
        /******密码栏获得焦点显示密码提示信息******/
        userpwd.onfocus = function () {
            pwdtip.style.color = "black";
            pwdtip.innerText = "密码为6~12位英文数字下划线";
        }
        /******确认密码栏失去焦点,验证两次密码******/
        conpwd.onblur = function () {
            if(pwdtip.style.color == "black"){
                if(conpwd.value === userpwd.value){
                    contip.style.color = "black";
                    contip.innerText = "确认密码验证通过";
                }else{
                    contip.style.color = "red";
                    contip.innerText = "两次密码不同";
                }
            }
        }
        /******当提交按钮按下******/
        btn.onclick = function () {
            if(nametip.style.color == "black" &&
            pwdtip.style.color == "black" &&
            contip.style.color == "black"){
                form.submit();
            }
        }

    }
</script>
</body>
</html>